var slider = {
    id: "",
    pageIndex: 0
}
/**
 * titles{
 *  text:"tab",
 *  pageIndex:"1",
 *  onSelected:function(to,from){}  return false
 *  }
 * @param selector
 * @param titles
 */
slider.createSlide = function createSlide(selector, titles, config) {
    if (config) {
        if (config.pageIndex) slider.pageIndex = config.pageIndex;
        if (config.id) slider.id = config.id;
    }
    var pages = $(selector);
    pages.css("flex", "1");
    var container = $("<div class='silderContainer' id='" + slider.id + "silderContianer'></div>");
    container.css("width", pages.length + "00%");
    var shade = $("<div class='silderShade'></div>");
    pages.eq(0).before(shade);

    shade.append(container);
    container.append(pages);
    var buttonGroup = $("<div class='silderButtonGroup' id='" + slider.id + "buttonGroup'></div>");
    $(titles).each(function (index, title) {
        var button = $("<div class='silderButton' id='" + slider.id + "pageIndex_" + title.pageIndex + "'>" + title.text + "</div>");
        button.on("click", function () {
            if (title.onSelected) {
                if (title.onSelected(title.pageIndex, slider.pageIndex)) {
                    slider.slideTo(title.pageIndex);
                }
            } else {
                slider.slideTo(title.pageIndex);
            }
        })
        buttonGroup.append(button);
    });
    var buttonSilder = $("<div class='buttonSilder'></div>");
    buttonGroup.append(buttonSilder);
    shade.before(buttonGroup);
    slider.slideTo(slider.pageIndex,true);
    shade.css("height","calc(100% - "+(shade.offset().top)+"px)");
}
slider.slideTo = function (to,init) {
    if (slider.pageIndex == to&&(init==null||init==false)) return;
    slider.pageIndex = to;
    var buttonGroup = $("#" + slider.id + "buttonGroup");
    var pageContainer = $("#" + slider.id + "silderContianer");
    buttonGroup.find(".active").removeClass("active");
    var active = buttonGroup.find("#" + slider.id + "pageIndex_" + to);
    active.addClass("active");
    pageContainer.css("margin-left", "-" + to + "00%");
    buttonGroup.find(".buttonSilder").css("left", (active.position().left + active.width() / 2 -30)+ "px");
}